<template>
  <div id="app"></div>
  <div class="container"></div>
  <h1>例证测试示例</h1>

  <!-- 输入框，用户输入查询文本 -->
  <textarea v-model="inputText" placeholder="请输入文本"></textarea>

  <!-- 例证按钮，按下时触发查询 -->
  <button @click="handleQuery">例证</button>

  <!-- 返回结果展示 -->
  <textarea v-model="resultText" placeholder="查询结果" readonly></textarea>


</template>

<script>
export default {
  data() {
    return {
      inputText: '',  // 用户输入的文本
      resultText: '', // 显示的结果
    };
  },
  methods: {
    async handleQuery() {
      try {
        // 获取输入框中的最后一句话作为 query
        const lastSentence = this.inputText.trim().split('。').pop().trim();

        // 如果没有输入有效内容，直接返回
        if (!lastSentence) {
          alert('请输入有效的查询文本');
          return;
        }
        console.log(lastSentence)

        // 调用后端 API
        const response = await fetch('http://localhost:5000/api/query', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({ query: lastSentence }),
        });

        // 处理返回的结果
        if (response.ok) {
          const data = await response.json();
          if (data.results && data.results.length > 0) {
            this.resultText = data.results.map(result => result.content).join('\n\n');
            console.log(data)
          } else {
            this.resultText = '没有找到相关结果';
          }
        } else {
          const errorData = await response.json();
          this.resultText = `Error: ${errorData.error}`;
        }
      } catch (error) {
        this.resultText = `请求失败: ${error.message}`;
      }
    },
  },
};
</script>

<style scoped>
#app {
  font-family: Arial, sans-serif;
  text-align: center;
}

.container {
  width: 80%;
  margin: 0 auto;
  padding-top: 50px;
}

textarea {
  width: 100%;
  height: 150px;
  margin-bottom: 10px;
  padding: 10px;
  font-size: 16px;
  line-height: 1.5;
  border: 1px solid #ccc;
  border-radius: 5px;
}

button {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  border: none;
  background-color: #007bff;
  color: white;
  border-radius: 5px;
  margin-bottom: 20px;
}

button:hover {
  background-color: #0056b3;
}
</style>
